<template>
  <div class="container-fluid standard-bg">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
      <div id="anime-ranking-list">
        <aside class="dark-bg sidebar">
          <article>
            <h2 class="icon"><i class="fa fa-signal" aria-hidden="true"></i>排行榜</h2>
            <ul class="rank-navbar">
              <li class="col-xs-4" :class="{'active': active === 0}"><a :href="toRank[0]">动漫</a></li>
              <li class="col-xs-4" :class="{'active': active === 1}"><a :href="toRank[1]">漫画</a></li>
              <li class="col-xs-4" :class="{'active': active === 2}"><a :href="toRank[2]">小说</a></li>
              <li class="clearfix"></li>
            </ul>
            <ul class="rank list-group">
              <transition-group name="kerwin">
              <li class="list-group-item" v-for="item in itemList" :key="item.id">
                <a :href="item.href">
                  <span class="num col-md-1">{{ item.no }}</span>
                  {{ item.name }}
                  <span class="badge pull-right">{{ item.hot }}&nbsp;℃</span></a>
              </li>
              </transition-group>
            </ul>
          </article>
        </aside>
      </div>
      <div class="clearfix spacer"></div>
    </div>
    <div class="col-lg-1"></div>
  </div>
</template>

<script>
import {getHotList} from './rank-js'

export default {
  name: 'Rank',
  data () {
    return {
      active: 0,
      toRank: ['/#/rank/anime', '/#/rank/manga', '/#/rank/novel'],
      itemList: []
    }
  },
  mounted () {
    this.itemList = []
    for (let i = 0; i < 3; i++) {
      const item = {id: i, href: '#', no: i + 1, name: 'NULL', hot: 0}
      this.itemList.push(item)
    }
    this.init(this.$route)
  },
  methods: {
    init (newVal) {
      let arr = {rankAnime: 0, rankManga: 1, rankNovel: 2}
      this.active = arr[newVal.name]
      // console.log('rank', newVal, newVal.name, arr[newVal.name])
      getHotList(this, this.active)
    }
  },
  watch: {
    '$route': {
      handler: function (newVal) {
        this.init(newVal)
      }
    }
  }
}
</script>

<style scoped>
  .kerwin-enter-active {
    animation: aaa 1s;
  }
  .kerwin-leave-active {
  }
  @keyframes aaa {
    0% {
      opacity: 0;
      transform: translateX(40px);
    }
    100% {
      opacity: 1;
    }
  }
</style>
